/* global document */
import React from 'react'
import PropTypes from 'prop-types'
import {Button, Col, DatePicker, Divider, AutoComplete, Form, Icon, Input, Row, Select} from 'antd'
import classnames from 'classnames'
import styles from './Filter.less'
import {message} from "antd/lib/index"

const FormItem = Form.Item
const {Option} = Select

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const Filter = ({
                  dataSource,
                  handleSearch,
                  departments,
                  todayTotalIncome,
                  ytodayTotalIncome,
                  onFilterChange,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {

  const handleFields = (fields) => {
    const {beginTransferTime, endTransferTime} = fields
    if (beginTransferTime) {
      fields.beginTransferTime = beginTransferTime.format('YYYY-MM-DD HH:mm:ss')
    }
    if (endTransferTime) {
      fields.endTransferTime = endTransferTime.format('YYYY-MM-DD HH:mm:ss')
    }
    return fields
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const renderAdvancedForm = () => (
    <Form layout="horizontal">
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="运营微号">
            {getFieldDecorator('operatorWxId')(<Input placeholder="运营微信号"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="归属员工">
            <AutoComplete
              dataSource={dataSource.map(_ => <Option value={_.id}>{_.name}</Option>)}
              style={{width: '100%'}}
              onSearch={handleSearch}
              placeholder="员工编号或名称"
            />
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="公司部门">
            {getFieldDecorator('deptId')(
              <Select allowClear placeholder="请选择">
                {departments.map(_ => <Option value={_.id}>{_.name}</Option>)}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友微信号">
            {getFieldDecorator('friendWxId')(<Input placeholder="好友微信号"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="方向">
            {getFieldDecorator('msgDirection')(
              <Select allowClear placeholder="请选择">
                <Option value={0}>{'转出'}</Option>
                <Option value={1}>{'转入'}</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="方式">
            {getFieldDecorator('ways')(
              <Select allowClear placeholder="请选择">
                <Option value={0}>{'微信红包'}</Option>
                <Option value={1}>{'微信转账'}</Option>
                <Option value={2}>{'提现'}</Option>
                <Option value={3}>{'信用卡还款'}</Option>
                <Option value={4}>{'转账到银行卡'}</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem label="inline" {...formItemLayout} label="金额">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('minAmount')(<Input placeholder="最小值"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('maxAmount')(<Input placeholder="最大值"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <FormItem labelCol={{span: 6}} wrapperCol={{span: 18}} label="转账时间">
            <Col span={11}>
              {getFieldDecorator('beginTransferTime')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              {getFieldDecorator('endTransferTime')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
            </Col>
          </FormItem>
        </Col>
        <Col xl={{span: 6}} md={{span: 24}} sm={{span: 24}}>
          <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
          <Button className="margin-right" onClick={handleFormReset}>重置</Button>
          {/*<a href="javascript:alert('下载模板');" target="_blank">*/}
            {/*<Button className="margin-right"><Icon type="cloud-download-o"/>导出</Button>*/}
          {/*</a>*/}
        </Col>
      </Row>
    </Form>
  )

  const renderForm = () => {
    return renderAdvancedForm()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 1}} md={{span: 2}} sm={{span: 6}}>
        </Col>
        <Col span={3}>
          <div className={classnames(styles['flex-status-bar'])}>
            <span>今日新增收入：<span style={{fontWeight: 'bold', fontSize: 18}}>{todayTotalIncome}</span></span>
          </div>
        </Col>
        <Col span={3}>
          <div className={classnames(styles['flex-status-bar'])}>
            <span>昨日新增收入：<span style={{fontWeight: 'bold', fontSize: 18}}>{ytodayTotalIncome}</span></span>
          </div>
        </Col>
        <Divider/>
      </Row>
      {renderForm()}
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
